                           <!-- 存入 盲盒信息 -->
<template>
	<view class="save-info" >
				<view class="online-status flex" style="background:#effaff;">
					<view class="info">
						<view class="h3">尽可能填写真实信息..</view>
						<view class="p">提交后客服将进行认真审核</view>
					</view>
					<image src="../../static/img/img_guide_video_chat.png" mode="heightFix"></image>
				</view>
        
				<!-- <view class="online-status flex"  style="background:#fffbee;">
					<view class="info">
						<view class="h3">您的盲盒正在审核..</view>
						<view class="p">通常在24小时内被处理完成</view>
					</view>
					<image src="../../static/img/img_guide_video_chat.png" mode="heightFix"></image>
				</view>
				<view class="online-status flex" >
					<view class="info">
						<view class="h3">您正在盲盒之中..</view>
						<view class="p">还剩{{info.blind_status.surplus_number}}次可被异性开启的机会~</view>
					</view>
					<image src="../../static/img/img_123.png" mode="heightFix"></image>
				</view>
				<view class="online-status flex" style="background:#f9f9f9;">
					<view class="info">
						<view class="h3">你的盲盒已被下架..</view>
						<view class="p">{{input.remarks || "赶快重新填写资料再次匹配吧~"}}</view>
					</view>
					<image src="../../static/img/img_guide_video_chat.png" mode="heightFix"></image>
				</view> -->
			
			<view class="sp-view">
				<view class="save-title">微信号<text>*</text></view>
				<input type="text" placeholder="记得开启微信号被搜索权限" v-model="input.wechat_number" class="input" :disabled="disabled" />
			</view>
			<view class="sp-view">
				<view class="save-title">你的性别<text>*</text></view>
				<view class="gender flex">
					<view class="item" :class="input.blind_sex == 1 ? 'active' : ''" @click="sexChange(1)">
						<image src="../../static/img/head_boy.png" mode="widthFix"></image>男生
					</view>
					<view class="item" :class="input.blind_sex == 2 ? 'active' : ''" @click="sexChange(2)">
						<image src="../../static/img/head_girl.png" mode="widthFix"></image>女生
					</view>
				</view>
			</view>
			<view class="sp-view">
				<view class="save-title">自我介绍</view>
				<view class="textarea">
					<textarea placeholder="最长500字" v-model="input.introduction" :disabled="disabled" />
					<view class="photos flex">
						<!-- <view class="item" v-for="(item,index) in input.photos" @click="openImage(index)">
							<image :src="item.url" mode="aspectFill"></image>
						</view> -->
						<!-- <view class="item" v-if="input.photos.length <= 6" @tap="upload(-1)">
							<image src="../../static/img/upload.png" mode="aspectFill"></image>
						</view> -->
					</view>
				</view>
			</view>
			<view class="sp-view" style="margin-top:40rpx;" v-if="!showMoreInfo">
				<a class="showMoreInfo" @tap="showMoreInfo = true;">填写更多真实信息，让对象更好的找到你~</a>
			</view>
			
				<view class="sp-view">
					<view class="save-title">手机号码</view>
					<input type="tel" placeholder="方便另一半找到你~" maxlength="11" v-model="input.phone_number" class="input" :disabled="disabled" />
				</view>
	<!-- 			<view class="sp-view">
					<view class="tag flex">
						<text v-for="(item,index) in info.interesting_list" @tap="selectInterseting(item)" :class="input.interest.indexOf(item) != -1 ? 'active' : ''">{{item}}</text>
					</view>
				</view> -->
			
			
				<view class="btn" @click="dataSaveCloud()">将信息存入盲盒</view>
			<!-- 	<view class="btn disabled" v-if="info.blind_status.is_blind == 0">等待审核中</view>
				<view class="btn" @tap.stop="unSave">下架我的盲盒</view> -->
			
		<!-- <pay-code ref="pay-code" @call="payCodeCall"></pay-code> -->
	</view>
</template>

<script>
  import { mapMutations,mapState } from 'vuex'
	export default {
		data() {
			return {
        btn: false,
				// systemInfo: uni.getSystemInfoSync(),
				// showMoreInfo:false,
				// info:null, //基本信息
				input:{ //用户需要输入的信息
					wechat_number:"",
					// interest:[],
					introduction:"",
					phone_number:"",
					blind_sex:1,
          token : '',
					// photos:[],
				},
			}
		},
		computed:{
	
		...mapState('m_user',['token'])
		},
    onLoad() {
      this.btn = false
      this.input.token = this.token
      
    },
		methods: {
      //将盲盒信息保存的阿里云服务数据库中
     dataSaveCloud(){
       if(this.input.wechat_number == ''){
         uni.showToast({
         	icon: 'none',
         	title: '请输入真实的微信号'
         })
         return
       }
       if(!this.input.phone_number == ''){
         let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
         if (!reg.test(this.input.phone_number)) {
         	uni.showToast({
         		icon: 'none',
         		title: '请输入正确的11位手机号'
         	})
         	this.input.phone_number = '';
         	return false;
         }

       }
       
       if(this.btn == true){
         return
       }
       this.btn = true
       uniCloud.callFunction({
         name:'h5-addUser',
         data:this.input,
         success: (e) => {
            this.delayNavigate()
           
         }
       })
     },
     // 返回登录之前的页面
     navigateBack(){
      
      uni.switchTab({
        // 要导航到的页面地址
        url: '/pages/index/index'
      })          
              
     },
     // 展示倒计时的提示消息
     showTips(n) {
       // 调用 uni.showToast() 方法，展示提示消息
       uni.showToast({
         // 不展示任何图标
         icon: 'none',
         // 提示的消息
         title: '信息添加盲盒成功！' + n + ' 秒后自动跳转到缘分星球',
         // 为页面添加透明遮罩，防止点击穿透
         mask: true,
         // 1.5 秒后自动消失
         duration: 1500
       })
     },
     // 延迟导航到 my 页面
     delayNavigate() {
        // 把 data 中的秒数重置成 3 秒,在执行此方法时，立即将 seconds 秒数重置为 3 即可
         this.seconds = 3
       // 1. 展示提示消息，此时 seconds 的值等于 3
       this.showTips(this.seconds)
     
       // 2. 创建定时器，每隔 1 秒执行一次
       // 1. 将定时器的 Id 存储到 timer 中
        this.timer = setInterval(() => {
         // 2.1 先让秒数自减 1
         this.seconds--
         // 2. 判断秒数是否 <= 0
         if (this.seconds <= 0) {
        // 2.1 清除定时器
           clearInterval(this.timer)
           // 2.2 跳转到 my 页面
           
            uni.switchTab({
              // 要导航到的页面地址
              url: '/pages/index/index'
            })     
            // 2.3 终止后续代码的运行（当秒数为 0 时，不再展示 toast 提示消息）
             return
           }
         // 2.2 再根据最新的秒数，进行消息提示
         this.showTips(this.seconds)
       }, 1000)
     },

			
		
			//性别选择
			sexChange(sex){
				// if(this.disabled){
				// 	return;
				// }
				this.input.blind_sex = sex;
			},
	
				
		
		},
		mounted(){
			// this.getData();
		},
	}
</script>

<style lang="scss" scoped>
	.save-info{
		min-height:100vh;
		background:#FFF;
		padding:20rpx 40rpx;
		.online-status{
			background:#fff6f6;
			flex-direction: row;
			align-items: center;
			margin:0 -20rpx;
			padding:30rpx 50rpx;
			border-radius:10rpx;
			.info{
				flex:1;
				width:0;
				.h3{
					font-weight:bold;
					font-size:32rpx;
					line-height:50rpx;
				}
				.p{
					color:#999;
					font-size:28rpx;
					line-height:50rpx;
					margin-top:10rpx;
				}
			}
			image{
				height:150rpx;
			}
		}
		.sp-view{
			margin-top:55rpx;
			.save-title{
				font-size:32rpx;
				line-height:50rpx;
				font-weight:bold;
				text{
					margin-left:12rpx;
					font-size:30rpx;
					color:#F30;
				}
			}
			.gender{
				flex-direction: row;
				margin-top:30rpx;
				.item{
					flex:1;
					width:0;
					font-size:28rpx;
					color:#707070;
					text-align: center;
					&.active{
						color:$background;
						font-weight:bold;
					}
					image{
						display: block;
						margin:0 auto;
						width:140rpx;
						margin-bottom:20rpx;
					}
				}
			}
			.input{
				font-size:28rpx;
				line-height:60rpx;
				padding:15rpx 30rpx;
				height:90rpx;
				border-radius:10rpx;
				border:1px solid #F1F1F1;
				display: block;
				margin-top:25rpx;
			}
			.textarea{
				position:relative;
				padding:20rpx 30rpx;
				border-radius:10rpx;
				border:1px solid #F1F1F1;
				margin-top:25rpx;
				textarea{
					font-size:28rpx;
					line-height:50rpx;
					height:170rpx;
					display: block;
					width:100%;
				}
				.photos{
					flex-direction: row;
					flex-wrap: wrap;
					margin-top:26rpx;
					margin-bottom:-10rpx;
					.item{
						margin-right:22rpx;
						margin-bottom:22rpx;
						width:calc((750rpx - 44rpx - 80rpx) / 4);
						height:120rpx;
						border-radius:10rpx;
						overflow:hidden;
						&:nth-child(3n){
							margin-right:0;
						}
						image{
							display:block;
							width:100%;
							height:100%;
						}
					}
				}
			}
			.tag{
				margin-top:30rpx;
				flex-direction: row;
				flex-wrap: wrap;
				margin-bottom:-25rpx;
				text{
					border:2rpx solid #d5d5d5;
					color:#4e4e4e;
					margin-right:25rpx;
					margin-bottom:25rpx;
					width:calc((100% - 50rpx) / 3);
					display:block;
					line-height:70rpx;
					text-align:center;
					border-radius:100rpx;
					font-size:28rpx;
					&.active{
						border:2rpx solid #7a57ff;
						color:#7a57ff;
					}
					&:nth-child(3n){
						margin-right:0;
					}
				}
			}
			.showMoreInfo{
				color:#b7b7b7;
				font-size:28rpx;
				line-height:35rpx;
				text-align:center;
				display: block;
			}
		}
		.btn{
			width:80%;
			background:$bodyBackgroundLine;
			color:#FFF;
			font-weight:bold;
			font-size:32rpx;
			margin:0 auto;
			margin-top:60rpx;
			margin-bottom:40rpx;
			line-height:100rpx;
			text-align:center;
			border-radius:100rpx;
			&:active{
				opacity: 0.8;
			}
			&.disabled{
				background: #eeeeee;
				color: #878787;
			}
		}
	}
</style>
